<template>
	<view>
		<!-- 头部头像-->
		<view class="avatar">
			<view></view>
			<image :src="avatarUrl" class="avatarImg"></image>
			<text>{{ nickName }}</text>
		</view>
		<image src="../../../static/images/member_bg_02.png" class="avatar_bg"></image>
		<!-- 我的订单 -->
		<view class="My_Order">
			<view class="My_Order_view">
				<view class="My_Order_left">
					<text>我的订单</text>
				</view>
				<view class="My_Order_right" @click="goPage(0)">
					<!-- <navigator url="../../membershipService/myOrders/myOrders" hover-class="none"> -->
					  <text>全部</text>
					  <image src="../../../static/images/arrow_icon_03.png"></image>
					<!-- </navigator>		 -->
				</view>
			</view>
			<view class="order_status">
				<view @click="goPage(1)">
					  <image src="../../../static/images/Order_icon_03.png"></image>
					  <text>待付款</text>
				</view>
				<view @click="goPage(2)">
					  <image src="../../../static/images/Order_icon_05.png"></image>
					  <text>待发货</text>
				</view>
				<view @click="goPage(3)">
					<image src="../../../static/images/Order_icon_07.png"></image>
					<text>待收货</text>
				</view>
				<view>
					<image src="../../../static/images/Order_icon_09.png"></image>
					<text>待评价</text>
				</view>
				<view>
                    <navigator url="../../membershipService/afterSales/afterSales" hover-class="none">
						<image src="../../../static/images/Order_icon_11.png"></image>
						<text>售后</text>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 我的地址 -->
		<navigator url="../../membershipService/addressManagement/addressManagement">
			<view class="myFeatures">
				<view class="myFeatures_left">
					<image src="../../../static/images/myAddress_03.png" class="my_icon"></image>
					<text>我的地址</text>
				</view>
				<view class="myFeatures_right">
					<image src="../../../static/images/arrow_icon_03.png" class="arrow_icon"></image>
				</view>
			</view>
		</navigator>
		<!-- 联系客服 -->
		<navigator url="../../membershipService/customerService/customerService">
			<view class="myFeatures">
				<view class="myFeatures_left">
					<image src="../../../static/images/myCustomerService_03.png" class="my_icon"></image>
					<text>联系客服</text>
				</view>
				<view class="myFeatures_right">
					<image src="../../../static/images/arrow_icon_03.png" class="arrow_icon"></image>
				</view>
			</view>
		</navigator>
		<!-- 我的优惠券 -->
		<view class="myFeatures">
			<view class="myFeatures_left">
				<image src="../../../static/images/myCoupon_03.png" class="my_icon"></image>
				<text>我的优惠券</text>
			</view>
			<view class="myFeatures_right">
				<text>{{Coupon_Count}}张</text>
				<image src="../../../static/images/arrow_icon_03.png" class="arrow_icon"></image>
			</view>
		</view>
		<!-- 我要开店 -->
		<navigator open-type="navigate" url="/pages/membershipService/openShop/openShop">
			<view class="myFeatures">
				<view class="myFeatures_left">
					<image src="../../../static/images/myShop_03.png" class="my_icon"></image>
					<text>我要开店</text>
				</view>
				<view class="myFeatures_right">
					<image src="../../../static/images/arrow_icon_03.png" class="arrow_icon"></image>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//头像图片
				avatarImg:"../../../static/images/Avatar.png",
				//昵称
				nickname:"白云",
				//优惠卷数量
				Coupon_Count:3
			};
		},
		computed:{
			nickName(){
				return this.$store.state.nickName;
			},
			avatarUrl(){
				return this.$store.state.avatarUrl;
			}
		},
		methods:{
			goPage(tab){
				uni.navigateTo({
					url: "../../membershipService/myOrders/myOrders?index=" + tab,
				})
			}
		}
	}
</script>

<style>
	page{
		background:#F5F5F5;
	}
  .avatar{
	 width:100%;
	 text-align: center;
	 position:relative;
	 background: #f2526f;
  }
   .avatar view{
  	  width:154upx;
  	  height: 154upx;
  	  border-radius: 50%;
  	  background:#fff;
  	  text-align: center;
  	  line-height: 163upx;
	  opacity: 0.5;
	  position: relative;
	  top:0%;
	  left:39%;
	  padding:1%;
  }
  .avatar .avatarImg{
  	  width: 154upx;
  	  height:154upx;
  	  border-radius:50% ;
  	  position: absolute;
  	  top:3.5%;
  	  left:40%;
	  /* margin-top:1%; */
  }
  .avatar text{
	  text-overflow:ellipsis;
	  overflow: hidden;
	  white-space: nowrap;
	  color:#fff;
	  font-size:36upx;
	  display: inline-block;
	  width:300upx;
	  z-index: 999;
  }
  .avatar_bg{
  	  width:100%;
  	  height:100upx;
  }
  .My_Order{
	  background:#fff;
	  margin-top:-10upx;
  }
  .My_Order_view{
	  display: flex;
	  justify-content: space-between;
	  height:100upx;
	  width:95%;
	  line-height: 100upx;
	  margin:0 auto;
	  border-bottom:1upx solid #e0e0e0;
  }
  .My_Order_left{
	  font-size:30upx;
	  color:#222222;
  }
  .My_Order_right image{
  	  width:15upx;
  	  height:36upx;
  	  margin-left:10upx;
	  position: relative;
	  top:8upx;
	  left:0upx;
  }
  .My_Order_right text{
	  font-size:24upx;
	  color:#7b7b7b;
	  padding:-15upx 0;
	  display: inline-block;
  }
  .order_status{
	  display: flex;
	  justify-content: space-around;
	  margin:33upx 0;
	  padding-bottom:30upx;
  }
  .order_status view image{
	  width:64upx;
	  height:60upx;
  }
  .order_status view text{
	  font-size:28upx;
	  color:#222222;
	  display: block;
	  margin-left:-11upx;
  }
  .arrow_icon{
	 width:15upx;
	 height:36upx;
  }
  .my_icon{
	  width:46upx;
	  height:36upx;
  }
  .myFeatures{
	  display: flex;
	  justify-content: space-between;
	  width:100%;
	  height: 94upx;
	  background:#fff;
	  border-bottom:1upx solid #e0e0e0;
	  margin:0 auto;
	  line-height: 94upx;
  }
  .myFeatures_left image{
	  position: relative;
	  top:8upx;
	  left:12upx;
  }
  .myFeatures_left text{
	  font-size:30upx;
	  color: #222222;
	  margin-left:30upx;
  }
  .myFeatures_right image{
	  position: relative;
	  top:8upx;
	  left:-22upx;
  }
  .myFeatures_right text{
	  font-size:24upx;
	  color:#999999;
	  margin-right:40upx;
  }
</style>
